<template>
  <div class="table-data">
    <div class="search-box">
      <el-input
        size="small"
        v-model="searchVal"
        placeholder="请输入课程名称检索"
      />
      <el-button
        size="small"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch"
        >搜索</el-button
      >
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :height="tHeight"
      class="table-box"
      v-loading="loading"
    >
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column label="课程名称" prop="title"></el-table-column>
      <el-table-column
        width="120"
        label="课程等级"
        prop="level"
      ></el-table-column>
      <el-table-column width="120" label="技术栈" prop="type"></el-table-column>
      <el-table-column
        width="120"
        label="报名人数"
        prop="count"
      ></el-table-column>
      <el-table-column
        width="160"
        label="上线日期"
        prop="date"
      ></el-table-column>
      <el-table-column v-if="getUser.key != 'visitor'" label="操作" width="160">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.$index, scope.row)" size="mini"
            >编辑</el-button
          >
          <el-button
            @click="handleDelete(scope.$index, scope.row)"
            size="mini"
            type="danger"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pages" ref="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
    </div>
    <EditTableDialog
      :dialogVisible="dialogVisible"
      :formData="formData"
      @closedialog="dialogVisible = false"
    />
  </div>
</template>
<script  lang='ts'>
import { Component, Vue, Provide, Watch } from 'vue-property-decorator'
import { loadMore, searchVal, profilesDelete } from '@/api/dataManage'
import { Getter } from 'vuex-class'
import EditTableDialog from './components/EditTableDialog.vue'
@Component({
  components: { EditTableDialog },
})
export default class TableData extends Vue {
  @Getter('user') getUser: any
  @Provide() searchVal: string = ''
  @Provide() tHeight: number = document.body.offsetHeight - 270 //表格高度为去除表格距离顶部200和底部70
  @Provide() tableData: any = []
  @Provide() page: number = 1
  @Provide() size: number = 5
  @Provide() total: number = 0
  @Provide() loading: boolean = true
  @Provide() dialogVisible: boolean = false
  @Provide() formData: object = {
    //传入子组件的值
    title: '',
    type: '',
    level: '',
    count: '',
    date: '',
  }
  created() {
    this.loadData()
    this.page = 1
  }
  loadData() {
    let _this = this as any
    this.loading = true
    let params = {
      page: this.page,
      size: this.size,
    }
    loadMore(params)
      .then((res: any) => {
        this.loading = false
        let data = res.data.data
        // TODO:暂无数据返回
        this.tableData = data.list
        this.total = data.total
      })
      .catch((err: any) => {
        this.loading = false
      })
  }
  // 搜索
  handleSearch(): void {
    this.page = 1
    this.searchVal ? this.loadSearchData() : this.loadData()
  }
  // 搜索数据
  loadSearchData() {
    this.loading = true
    let _this = this as any
    let params = {
      searchVal: _this.searchVal,
      page: _this.page,
      size: _this.size,
    }
    searchVal(params)
      .then((res: any) => {
        console.log('搜索返回', res.data.datas)
        let data = res.data.datas
        this.loading = false
        this.tableData = data.list
        this.total = data.total
      })
      .catch((err: any) => {
        this.loading = false
        _this.$message.error(err)
      })
  }
  handleSizeChange(val: number): void {
    this.size = val
    this.page = 1
    this.searchVal ? this.loadSearchData() : this.loadData()
  }
  handleCurrentChange(val: number): void {
    this.page = val
    this.size = 5
    this.searchVal ? this.loadSearchData() : this.loadData()
  }
  // 编辑
  handleEdit(index: number, row: object): void {
    // console.log('编辑', index, row)
    this.formData = row
    this.dialogVisible = true
  }
  handleDelete(index: number, row: any): void {
    console.log(row)
    this.loading = true
    let _this = this as any
    profilesDelete({ id: row._id })
      .then((res: any) => {
        this.loading = false
        _this.$message({
          message: res.data.msg,
          type: 'success',
        })
        // this.tableData.splice(index, 1)
        this.loadData()
      })
      .catch((err: any) => {
        this.loading = false
        _this.$message.error(err)
      })
  }
  // 关闭子组件的对话框
  // closeDialog() {
  //   this.dialogVisible = false
  // }
}
</script>
 <style  lang='scss' scoped>
.table-data {
  height: 100%;
  .table-box {
    font-size: 14px;
  }
  .pages {
    background: #fff;
    margin-top: 10px;
    padding: 10px 10px;
    text-align: right;
    height: 55px;
    box-sizing: border-box;
  }
  .search-box {
    background: #fff;
    margin-bottom: 10px;
    padding: 10px 10px;
    border-radius: 4px;
    height: 55px;
    box-sizing: border-box;
    .el-input {
      width: 200px;
      margin-right: 10px;
    }
  }
}
</style>